<template>
    <lay-form :model="model">
      <div v-if="scene === 'number'">
        <lay-form-item>
          <lay-row>
            <lay-col md="4"><div class="left-title">执行次数：</div></lay-col>
            <lay-col md="20">
              <lay-input-number
                v-model="model.number"
                position="right"
                :step="1"
                style="width: 80%;margin-top: 15px;margin-left: 10%"
              ></lay-input-number>
            </lay-col>
          </lay-row>
        </lay-form-item>
      </div>
      <div v-else>
<!--        <lay-form-item>-->
<!--          <lay-row>-->
<!--            <lay-col md="6"><div class="left-title">TOP:</div></lay-col>-->
<!--            <lay-col md="18">-->
<!--              <lay-input-number-->
<!--                v-model="model.top"-->
<!--                position="right"-->
<!--                :step="1"-->
<!--                style="width: 80%;margin-top: 15px;margin-left: 10%"-->
<!--              ></lay-input-number>-->
<!--            </lay-col>-->
<!--          </lay-row>-->
<!--        </lay-form-item>-->
<!--        <lay-form-item>-->
<!--          <lay-row>-->
<!--            <lay-col md="6"><div class="left-title">LEFT:</div></lay-col>-->
<!--            <lay-col md="18">-->
<!--              <lay-input-number-->
<!--                v-model="model.left"-->
<!--                position="right"-->
<!--                :step="1"-->
<!--                style="width: 80%;margin-top: 15px;margin-left: 10%"-->
<!--              ></lay-input-number>-->
<!--            </lay-col>-->
<!--          </lay-row>-->
<!--        </lay-form-item>-->
        <lay-form-item>
          <lay-row>
            <lay-col md="4"><div class="left-title">WIDTH:</div></lay-col>
            <lay-col md="20">
              <lay-input-number
                v-model="model.width"
                position="right"
                :step="1"
                style="width: 80%;margin-top: 15px;margin-left: 10%"
              ></lay-input-number>
            </lay-col>
          </lay-row>

        </lay-form-item>
        <lay-form-item>
          <lay-row>
            <lay-col md="4"><div class="left-title">HEIGHT:</div></lay-col>
            <lay-col md="20">
              <lay-input-number
                v-model="model.height"
                position="right"
                :step="1"
                style="width: 80%;margin-top: 15px;margin-left: 10%"
              ></lay-input-number>
            </lay-col>
          </lay-row>
        </lay-form-item>
      </div>
      <lay-form-item style="text-align: center;">
        <lay-button type="primary" @click="submit">确定</lay-button>
      </lay-form-item>
    </lay-form>
</template>

<script>
export default {
    name: "SceneHeader"
}
</script>

<script setup>
import {onMounted, ref} from "vue";

const {scene, model, setNumber} = defineProps({
    scene: {type: String, default: 'number'},
    model: {type: Object, default: {number: 1}},
    setNumber: {type: Function}
})

onMounted(()=>{
    setNumberMethod.value = setNumber;
})

const setNumberMethod = ref();

const submit = () => {
    setNumberMethod.value(model);
}
</script>

<style scoped>
.left-title {
  margin-left: 40px;
  margin-top: 25px;
}
</style>